export default config => {
	return `
<template>
    <div>
        <el-form-item label="图标">
            <avue-input
                type="text"
                :disabled="disabled"
                v-model="main.activeOption.icon"
            ></avue-input>
        </el-form-item>
        <el-form-item label="风格">
            <avue-select
                :disabled="disabled"
                v-model="main.activeOption.buttonStyle"
                :dic="dicOption.buttonStyle"
            >
            </avue-select>
        </el-form-item>
        <el-form-item label="是否加载">
            <avue-switch
                v-model="main.activeOption.loading"
                :disabled="disabled"
            >
            </avue-switch>
        </el-form-item>
        <el-form-item label="是否朴素按钮">
            <avue-switch v-model="main.activeOption.plain" :disabled="disabled">
            </avue-switch>
        </el-form-item>
        <el-form-item label="是否圆角按钮">
            <avue-switch v-model="main.activeOption.round" :disabled="disabled">
            </avue-switch>
        </el-form-item>
        <el-form-item label="是否圆形按钮">
            <avue-switch
                v-model="main.activeOption.circle"
                :disabled="disabled"
            >
            </avue-switch>
        </el-form-item>
        <el-form-item label="禁用">
            <avue-switch
                v-model="main.activeOption.disabled"
                :disabled="disabled"
            >
            </avue-switch>
        </el-form-item>
        <el-collapse accordion>
            <el-collapse-item title="文本样式">
                <el-form-item label="字体类型">
                    <avue-select
                        filterable
                        allow-create
                        :disabled="disabled"
                        v-model="main.activeOption.fontFamily"
                        :dic="dicOption.fontFamily"
                    ></avue-select>
                </el-form-item>
                <el-form-item label="字体大小">
                    <avue-input-number
                        v-model="main.activeOption.fontSize"
                        :max="200"
                        :disabled="disabled"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体颜色">
                    <avue-input-color
                        :disabled="disabled"
                        v-model="main.activeOption.color"
                    ></avue-input-color>
                </el-form-item>
                <el-form-item label="字体间距">
                    <avue-input-number
                        :disabled="disabled"
                        v-model="main.activeOption.split"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体背景">
                    <avue-input-color
                        :disabled="disabled"
                        v-model="main.activeOption.backgroundColor"
                    ></avue-input-color>
                </el-form-item>
                <el-form-item label="文字粗细">
                    <avue-select
                        :disabled="disabled"
                        v-model="main.activeOption.fontWeight"
                        :dic="dicOption.fontWeight"
                    >
                    </avue-select>
                </el-form-item>
                <el-form-item label="对齐方式">
                    <avue-select
                        :disabled="disabled"
                        v-model="main.activeOption.textAlign"
                        :dic="dicOption.justifyContent"
                    >
                    </avue-select>
                </el-form-item>
            </el-collapse-item>
        </el-collapse>
        <el-collapse accordion>
            <el-collapse-item title="超链设置">
                <el-form-item label="开启">
                    <avue-switch
                        :disabled="disabled"
                        v-model="main.activeOption.link"
                    ></avue-switch>
                </el-form-item>
                <template v-if="main.activeOption.link">
                    <el-form-item label="打开方式">
                        <avue-radio
                            :disabled="disabled"
                            v-model="main.activeOption.linkTarget"
                            :dic="dicOption.target"
                        >
                        </avue-radio>
                    </el-form-item>
                    <el-form-item label="超链地址">
                        <avue-input
                            :disabled="disabled"
                            v-model="main.activeOption.linkHref"
                        ></avue-input>
                    </el-form-item>
                </template>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { dicOption } from "@/option/config";
export default {
    name: '${config.compName}',
    inject: ["main", "contain"],
    data() {
        return {
            dicOption: dicOption,
            disabled: this.contain.activeObj.isLock
        };
    }
};
</script>

<style></style>
	`;
};
